<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta content="telephone=no" name="format-detection" />
  <meta name="format-detection" content="telephone=no">
  <title>查询信息</title>
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/lk/home_page.css">
  <% include ../component/_common_tongji.html %>  
  <script>!function (e) { function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var i = window; t["default"] = i.flex = function (normal, e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i), c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d[1] > 534 || c || (s = 1); var u = normal ? 1 : 1 / s, m = r.querySelector('meta[name="viewport"]'); m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 * s * n + "px" }, e.exports = t["default"] }]); flex(false, 100, 1);</script>
  <style>
    [v-cloak] {
      display: none;
    }

    html {
      font-size: 100px;
    }

    .bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .bg .modal {
      background: #FFF;
      width: 6rem;
      height: 2rem;
      line-height: 0.6rem;
      padding: 0.4rem 0;
      font-size: 0.46rem;
      text-align: center;
      margin: 0 auto;
      margin-top: 2rem;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div id="content" v-cloak>
    <div class="query" v-if="query">
      <nav>
        <img src="/img/10_01.jpg" alt="联考报名">
      </nav>
      <div class="phone">
        <input type="text" name="phone" placeholder="请输入手机号" v-model="queryInfo.phone">
        <div class="tel">
          <input type="text" placeholder="请输入六位验证码" name="sms_code" class="smsCode" v-model="queryInfo.sms">
          <span class="send" @click="handleSend">{{smsText}}</span>
        </div>
        <button @click="handleQuery">查询</button>
      </div>
    </div>
    <div class="hone_page" v-show="!query">
      <div class="top">
        <img src="/img/9_01.jpg" alt="联考报名">
      </div>
      <div class="person">
        <div class="per_left">
          <img src="/img/9_02.png">
          <p>{{userInfo.realname != '' ? userInfo.realname : "无昵称"}}</p>
          <span>第
            <strong>{{userInfo.rank}}</strong>名考生</span>
        </div>
        <div class="line"></div>
        <div class="per_right">
          <p class="money">助学金
            <span>{{userInfo.account_money}}</span> 元</p>
          <p class="invitation">成功邀请
            <span>{{userInfo.invitation_count}}</span>位好友</p>
        </div>
      </div>
      <div class="gap"></div>
      <div class="main">
        <div class="region">
          <div class="reg_left">
            <img src="/img/9_03.png" alt="地区"> 报名地区
          </div>
          <p>{{userInfo.city_name}}</p>
        </div>
        <div class="course">
          <div class="cour_left">
            <img src="/img/9_04.png" alt="报名科目"> 报名科目
          </div>
          <p>{{userInfo.subjects}}</p>
        </div>
        <div class="time">
          <div class="time_left">
            <img src="/img/9_05.png" alt="考试时间"> 考试时间
          </div>
          <p id="timeDay">3月16日—3月22日</p>
        </div>
        <div class="lkqq">
          <div class="qq_left">
            <img src="/img/9_06.png" alt="联考qq群"> 联考qq群
          </div>
          <p>701820219</p>
        </div>
      </div>
      <div class="gap"></div>
      <div class="footer">
        <p>试卷提交72小时后可查询成绩生成学情分析报告，如有其它问题可在联考考试群内咨询。
        </p>
        <a href="javascript:;" class="link" @click="handleshareLink">
          <img src="/img/9_07.png">分享我的专属链接
        </a>
        <a href="javascript:;" class="toggle">切换账号</a>
      </div>
    </div>
  </div>
  <!-- 分享图片 -->
  <div class="shareImg" style="display:none">
    <div id="sharePic" class="wrap">
      <img id="img" style="width:100%;display:block;border:0;" src="">
    </div>
    <div class="bg">
      <div class="modal">
        长按保存图片
        <br> 发送好友或分享朋友圈
      </div>
    </div>
  </div>
  <script src="https://sfile.tl100.com/js/libs/vue.min.js"></script>
  <script src="https://sfile.tl100.com/js/libs/axios.min.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script>
    var api = axios.create({
      baseURL: 'https://api.tl100.com/exam_signup',
      withCredentials: true,
      timeout: 5000,
      headers: { 'Content-Type': 'application/json;charset=UTF-8' }
    });
    function setLog(api, error) {
      var mydate = new Date();
      mydate.setHours(mydate.getHours()+8)
      axios.post('https://m.tl100.com/sce', {
        date: mydate,
        api: api,
        info: error
      });
    }
    var app = new Vue({
      el: '#content',
      data: {
        smsText: '发送',
        token: '',
        queryInfo: {
          phone: '',
          sms: ''
        },
        userInfo: {
          realname: '',
          subjects: '',
          city_name: '',
          account_money: '',
          invitation_count: '',
          rank: ''
        },
        query: true,
        smsSending: false
      },
      mounted() {
        this.token = localStorage.getItem("token");
        if (this.token && this.token != '') {
          this.handleQuery();
          // 获取图片
          api.post('/api/user/getShareImage', {
            token: this.token
          }).then(function (res) {
            var id = res.data.msg.split('/')[res.data.msg.split('/').length - 1];
            var date = new Date();
            var time = date.getTime();
            document.getElementById('img').src = res.data.msg + '?' + time;
            var WxApi = axios.create({
              baseURL: 'https://api.tl100.com/user',
              withCredentials: true,
              timeout: 5000
            });
            //微信签名
            WxApi.post('api/weixin/getXGKJJssdkSign', {
              url: location.href
            }).then(function (res) {
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.data.app_id, // 必填，公众号的唯一标识
                timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                signature: res.data.sign,// 必填，签名
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ'] // 必填，需要使用的JS接口列表
              });
              wx.ready(function () {
                var shareUrl = "https://m.tl100.com/lk/share?id=" + id;
                wx.onMenuShareAppMessage({
                  title: '这场被誉为“小高考”的联考，为啥吸引上百万考生？', // 分享标题
                  desc: '一百万高考生报名参加这场“小高考”超级全能生联考被刷屏炒火了！', // 分享描述
                  link: shareUrl + "&st=wx_qun", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: 'img/share-icon.jpg', // 分享图标
                  type: 'link', // 分享类型,music、video或link，不填默认为link
                  dataUrl: ''
                });
                wx.onMenuShareTimeline({
                  title: '这场被誉为“小高考”的联考，为啥吸引上百万考生？', // 分享标题
                  link: shareUrl + "&st=wx_timeline", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: 'img/share-icon.jpg'
                });
                wx.onMenuShareQQ({
                  title: '这场被誉为“小高考”的联考，为啥吸引上百万考生？', // 分享标题
                  desc: '一百万高考生报名参加这场“小高考”超级全能生联考被刷屏炒火了！', // 分享描述
                  link: shareUrl + "&st=qq", // 分享链接
                  imgUrl: 'img/share-icon.jpg'
                });
              });
            })
          });
        }
      },
      methods: {
        handleSend: function () {
          if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.queryInfo.phone))) {
            alert("不是完整的11位手机号或者正确的手机号前七位");
            return false;
          }
          if (this.smsSending) {
            return;
          }
          var i = 60;
          this.smsSending = true;
          this.smsText = '60s';
          var timeId = setInterval(() => {
            i--;
            this.smsText = (i + 's');
            if (i == 0) {
              clearInterval(timeId);
              this.smsText = '发送';
              this.smsSending = false;
            }
          }, 1000);
          var vm = this;
          api.post('/api/user/sendSmsCode', {
            phone: this.queryInfo.phone,
          }).then(function (res) {
            if (res.data.res_code != 1) {
              alert('发送失败，请稍后重试！');
              setLog('/api/user/sendSmsCode:fail', JSON.stringify(res.data));
              clearInterval(timeId);
              vm.smsText = '发送';
              vm.smsSending = false;
            }
          }).catch(function (error) {
            setLog('/api/user/sendSmsCode:catch', JSON.stringify(error));
          })
        },
        handleLogin: function () {
          if (this.queryInfo.phone == "") {
            alert('请填写手机号！');
            return;
          }
          if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.queryInfo.phone))) {
            alert("不是完整的11位手机号或者正确的手机号前七位");
            return false;
          }
          if (this.queryInfo.sms == "") {
            alert('请填写验证码！');
            return;
          }
          var vm = this;
          api.post('/api/user/login', {
            phone: this.queryInfo.phone,
            sms_code: this.queryInfo.sms
          })
          .then(function (res) {
            if (res.data.res_code == 1) {
              vm.token = res.data.msg.token
              localStorage.setItem('token', res.data.msg.token);
              vm.handleQuery();
            } else {
              alert(res.data.msg);
              setLog('/api/user/login:fail', JSON.stringify(res.data));
            }
          })
          .catch(function (error) {
            alert('登录超时，请刷新页面重试！');
            setLog('/api/user/login:catch', JSON.stringify(error));
          });
        },
        handleQuery: function () {
          if (this.token && this.token != '') {
            var vm = this;
            api.post('/api/sign_up/getUserSignUp', {
              token: this.token
            }).then(function (res) {
              console.log(res)
                if (res.data.res_code == 0) {
                  alert('您还未报名，请先报名');
                  return;
                }
                if (res.data.res_code == 1) {
                  if (res.data.msg.state && res.data.msg.state > 0) {
                    vm.userInfo.realname = res.data.msg.realname;
                    var subjects = JSON.parse(res.data.msg.subjects);
                    for (var i = 0; i < subjects.length; i++) {
                      vm.userInfo.subjects += subjects[i] + ' ';
                    }
                    vm.userInfo.city_name = res.data.msg.city_name;
                    vm.userInfo.account_money = res.data.msg.account_money;
                    vm.userInfo.invitation_count = res.data.msg.invitation_count;
                    vm.userInfo.rank = res.data.msg.rank;
                    vm.query = false;
                    if (res.data.msg.city_id == 95) {
                      document.getElementById('timeDay').innerHTML = '3月23日-3月25日';
                    } else {
                      document.getElementById('timeDay').innerHTML = '3月16日-3月18日'
                    }

                  } else {
                    alert('您还未报名，请先报名');
                  }
                }
                if (res.data.res_code < 0) {
                  localStorage.removeItem("token");
                  vm.token = "";
                  setLog('api/sign_up/getUserSignUp:fail', JSON.stringify(res.data));
                }
              })
              .catch(function (error) {
                setLog('api/sign_up/getUserSignUp:catch', JSON.stringify(error));
              });
          } else {
            this.handleLogin();
          }
        },
        handleshareLink: function () {
          // 点击显示图片
          clearTimeout(timer);
          document.querySelector('.shareImg').style.display = "block";
          document.querySelector('#content').style.display = 'none';
          var timer = setTimeout(function () {
            document.getElementsByClassName('bg')[0].style.display = 'none';
          }, 3500);

          var ch = document.documentElement.clientHeight;
          document.getElementsByClassName('modal')[0].style['margin-top'] = (ch / 2 - 100) + "px";
        },
        handleToggle: function () {
          localStorage.removeItem('token');
          location.replace('/lk/signup');
        }
      }
    })
  </script>
</body>

</html>